<template>
  <div class="info-page">
    <div class="tab-card el-page">
      <ul>
        <li class="info-title">基础信息</li>
        <li v-for="name in tabList" :key="name" class="infoTd"
          :class="name === tabActive ? 'infoTdCheck' : 'infoTdUnCheck'" @click="tabActive = name">{{ name }}</li>
      </ul>
    </div>
    <div class="default-card el-page">
      <template v-if="tabActive === '作物信息'">
        <CropInfo></CropInfo>
      </template>
      <template v-if="tabActive === '车辆信息'">
        <CarInfo></CarInfo>
      </template>
      <template v-if="tabActive === '司机信息'">
        <DriverInfo></DriverInfo>
      </template>
      <template v-if="tabActive === '押车人信息'">
        <BetcarInfo></BetcarInfo>
      </template>
      <template v-if="tabActive === '作物类别'">
        <CropType></CropType>
      </template>
      <template v-if="tabActive === '扣杂标准'">
        <ImpurityStandard></ImpurityStandard>
      </template>
      <template v-if="tabActive === '含水量标准'">
        <WaterStandard></WaterStandard>
      </template>
      <template v-if="tabActive === '客户信息'">
        <CustomerInfo></CustomerInfo>
      </template>
      <template v-if="tabActive === '作物品种'">
        <CropVariety></CropVariety>
      </template>
    </div>
  </div>
</template>

<script>
import './style.scss'
import CropInfo from './components/CropInfo/index.vue'
import CarInfo from './components/CarInfo/index.vue'
import DriverInfo from './components/DriverInfo/index.vue'
import BetcarInfo from './components/BetcarInfo/index.vue'
import CropType from './components/CropType/index.vue'
import ImpurityStandard from './components/ImpurityStandard/index.vue'
import WaterStandard from './components/WaterStandard/index.vue'
import CustomerInfo from './components/CustomerInfo/index.vue'
import CropVariety from './components/CropVariety/index.vue'
export default {
  components: {
    CropInfo,
    CarInfo,
    DriverInfo,
    BetcarInfo,
    CropType,
    ImpurityStandard,
    WaterStandard,
    CustomerInfo,
    CropVariety
  },
  data() {
    return {
      tabList: ['作物信息', '车辆信息', '司机信息', '押车人信息', '作物类别', '扣杂标准', '含水量标准', '客户信息', '作物品种'],
      tabActive: '作物信息',
    }
  },
  methods: {

  }
}
</script>

<style lang='scss' scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.info-page {
  display: flex;
  height: calc(100vh - 70px);

  .tab-card {
    width: 15%;
    margin-right: 1%;
    height: 100%;
    padding: 10px;


    .info-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #65C0AF;
      font-size: 16px;
      color: #fff;
    }

    .infoTd {
      height: 50px;
      line-height: 50px;
      color: #4f4f4f;
      background: #fff;
      cursor: pointer;
    }

    .infoTd.infoTdUnCheck {
      border-bottom: 2px solid #fff;
    }

    .infoTd.infoTdCheck {
      border-bottom: 2px solid #65c0af;
    }
  }

  .default-card {
    width: 84%;
    height: 100%;
    padding: 40px;
  }

}
</style>
